<!--
 * @Description:订单详情页面
 * @version: v1.0
 * @Author: Wang Xi
 * @Date: 2023-5-10 15:10:00
 * @LastEditors: Yejing
 * @LastEditTime: 2023-06-29 18:14:35
-->
<template>
	<view class="order-details-container">
		<c-layout>
			<c-navigation-bar @backEvent="backEvent" :title="$t('orderDetails.orderDetailsTitle')"
				slot="head"></c-navigation-bar>
			<view class="container-box">
				<view :class="`order-box ${currentOrderDetailsType !== '1' ? 'is-shipped' : ''}`">
					<view class="orderNumber">
						{{ $t('order.orderNumber') }}: {{ orderDetails.orderNo }}
					</view>
					<view class="orderTime">
						{{ $t('order.orderTime') }}:
							{{publicJS.timeZoneSwitching(Number(orderDetails.createTime))}}
					</view>
					<u-line color="rgba(247, 248, 250, 1)" :hair-line="false" margin="32rpx 0"/>
					<view class="payDetail">
						<!-- 商品列表 -->
						<view class="goods-list">
							<view class="goods-item" v-for="(item, index) in goodList" :key="index">
								<orderCard :orderDetails="item" :followUrlData="followUrlData" :icon="currentOrderDetailsType === '1'"
									:personal="false" @viewLogistics="viewLogistics"></orderCard>
							</view>

						</view>
		
					</view>
					<u-line color="rgba(247, 248, 250, 1)" :hair-line="false" margin="32rpx 0"/>
				<!-- 价格详情 -->
						<view class="price-details">
							<view class="price-details-title">
								<h2>
									{{ $t('orderDetails.priceDetails') }}<text style="color: #b6b6b6;font-size: 12px;">({{ $t('orderDetails.priceInfo') }})</text>
								</h2>
				
							</view>
							<view class="price-list">
								<ul>
									<li>
										<text>{{ $t('orderDetails.totalMoney') }}</text>
										<text style="color: #f26163">$ {{ Number(orderDetails.moneys).toFixed(2) }}</text>
									</li>
									<li>
										<!-- <text>Discount</text>
										<text style="color: #F26163;">-${{ orderDetails.moneys }}
										</text> -->
									</li>
									<li>
										<text>{{ $t('orderDetails.totalQuantity') }}</text>
										<text>x {{ orderDetails.totalNum }}</text>
									</li>
									<!-- <li>
										<text>{{ $t('orderDetails.shippingCharges') }}</text>
										<text>$ {{ orderDetails.totalPostage }}</text>
									</li> -->
								</ul>
							</view>
							<!-- <view class="price-result">
								<text>{{ $t('orderDetails.youPay') }}</text>
								<text style="color: #f26163">${{ Number(orderDetails.payMoney).toFixed(2) }}</text>
							</view> -->
						</view>
				

				</view>


			</view>


			<!--        弹框-->
			<promptDialog ref="promptDialogs_cs"></promptDialog>
		</c-layout>
	</view>
</template>

<script>
	import { math } from '@/common/math';
import { number } from 'mathjs';

	export default {
		data() {
			return {

				goodList: [],
				math,
				// 订单详情id
				orderDetailsId: '',
				// 订单详情
				orderDetails: {},
				// 地址列表
				// 修改订单地址
				changeOrderAddressPopShow: false,

				currentOrderDetailsType: '',
				// 付款密码弹出层
				payPwdPopShow: false,
				//分页
				paging: {
					pageSize: 20,
					pageNum: 1
				},

				followUrlData: {},

			};
		},

		onShow: function() {
			console.log('home-监听页面显示');
			//执行频率：game（20ms/次）、ui（60ms/次）、normal（200ms/次）
			setInterval(function() {}, 60);
		},
		onLoad(data) {
			this.$u.get('/app/shopOrderInfo/shopOrder/' + data.id).then(res => {
				let totalNum=0
				let moneys=0
				res.data.orderSkus.forEach(item=>{
					totalNum=number(totalNum)+number(item.num)
				})
				const list=res.data.orderSkus
				for(let i=0;i<list.length;i++){
					const price=list[i].num*list[i].price
					moneys=number(moneys)+number(price)
				}
				res.data.orderInfo.totalNum=totalNum
				res.data.orderInfo.moneys=moneys
				this.orderDetails = res.data.orderInfo
				this.$set(this.orderDetails,'payMoney', (Number(this.orderDetails.moneys)+Number(this.orderDetails.totalPostage)).toFixed(2))
				this.goodList = res.data.orderSkus
				console.log(res.data.orderInfo)

			}).catch(err => {
				this.$u.toast(err.data.msg);
				setTimeout(() => {
					this.backEvent()
				}, 1500)
			})



		},
		methods: {

			//返回上一页
			backEvent() {
				if (this.currentOrderDetailsType == 1) {

					console.log('返回');
					this.showModel = true;
				} else {
					this.publicJS.backOption()
				}
			},





			// 获取订单详情
			getOrderDetailsAjax() {
				// this.$u.post().then(res => {
				// 	this.orderDetails = res.data
				// })
			},




			// 弹出层状态修改
			popStatusChange(status) {
				this.changeOrderAddressPopShow = status;
				status && (this.currentAddress = this.defaulAddress);
			},



		}
	};
</script>

<style lang="scss" scoped>
	.order-details-container {
		height: 100vh;
		/deep/ 	.goods-name {
			
				-webkit-line-clamp: 3 !important;
			}
		.container-box {
			background-color: #fff;
			position: relative;
			padding-left: 0;
			padding-right: 0;
			height: 98%;

			.orderNumber {
				color: rgba(27, 29, 41, 1);
				font-family: PingFangSC-Heavy;
				font-size: 14px;
				font-weight: bold;
				margin: 20rpx 40rpx !important;
			}

			.orderTime {
				color: rgba(27, 29, 41, 1);
				font-family: PingFang SC;
				font-weight: 500;
				font-size: 12px;
			}

			.order-box {
				height: calc(100% - 202rpx);
				background-color: #fff;
				overflow-y: auto;
				overflow-x: visible;

				&.is-shipped {
					height: fit-content;
				}

				>view {
					margin: 0 40rpx;
				}

				.payDetail {
					border-radius: 16rpx;
				}

				.address-info {
					display: flex;
					justify-content: space-between;
					align-items: center;
					position: relative;
					height: 248rpx;
					border-radius: 16rpx;
					border: 2rpx solid #e1e8e8;
					margin-bottom: 16rpx;

					>.info {
						width: 70%;

						.name {
							color: #212121;
							font-size: 30rpx;
							font-weight: 500;
						}

						&> :not(.name) {
							color: #1e2432;
							line-height: 40rpx;
							font-size: 26rpx;
						}

						.dressMsg {
							color: #b6b6b6;
							font-family: PingFang SC;
							font-weight: 500;
							font-size: 28rpx;
						}
					}

					>.btn-area {
						display: flex;
						align-items: center;

						button {
							width: 180rpx;
							height: 48rpx;
							line-height: 48rpx;
							font-size: 24rpx;
							border-radius: 12rpx;
							margin: 0;
							margin-top: 22rpx;
							padding: 0;

							&[type='default']:not([plain]):not(.button-hover) {
								background: #2934d0;
							}

							&[plain] {
								border-color: #2934d0;

								&:not(.button-hover) {
									color: #2934d0;
								}
							}
						}
					}
				}

				.goods-list {
					position: relative;

					>.goods-item {
						padding: 28rpx 0;

						&:first-child {
							position: relative;

							&::after {
								position: absolute;
								content: '';
								width: 100%;
								height: 2rpx;
								background-color: #e1e8e8;
								bottom: 0;
							}
						}
					
					}
				}

				.price-details {
					padding-top: 28rpx;

					.price-details-title {
						>h2 {
							font-size: 30rpx;
							font-weight: 500;
							color: #212121;
						}

						>text {
							color: #b6b6b6;
							font-family: PingFang SC;
							font-weight: 500;
							font-size: 24rpx;
						}
					}

					.price-list {
						padding-bottom: 20rpx;
						border-bottom: 2rpx solid #f2f3f5;

						ul {
							li {
								font-size: 26rpx;
								display: flex;
								justify-content: space-between;
								margin-top: 10rpx;
							}
						}
					}

					.price-result {
						display: flex;
						justify-content: space-between;
						color: #212121;
						font-size: 26rpx;
						font-weight: 500;
						margin-top: 20rpx;
						margin-bottom: 30rpx;
					}
				}
			}
		}


	}
/deep/ .u-line {
    border-bottom: 4px solid rgb(247, 248, 250) !important;
}

</style>